<template>
  <xdh-echarts :options="options" width="100%" height="88%"></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  export default {
    name: 'pie-one',
    components: {
      XdhEcharts
    },
    directives: {},
    props: {
      seriesData: {
        type: Array,
        default() {
          return []
        }
      },
      seriesOuterData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    mixins: [],
    data() {
      return {
        options: {
          series: [
            {
              type: 'pie',
              radius: [0, '38%'],
              color: ['#e62f34', '#4e83ff'],
              labelLine: {
                normal: {
                  show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                }
              },
              label: {
                normal: {
                  formatter: '{per|{d}%}\n{hr|}\n{b|{b}：{c}人}',
                  rich: {
                    hr: {
                      width: '100%',
                      height: 0.5,
                      backgroundColor: '#fff',
                      shadowBlur: 2,
                      shadowOffsetX: 2
                    },
                    b: {
                      color: '#fff',
                      fontSize: 18,
                      lineHeight: 36
                    },
                    per: {
                      fontSize: 28,
                      fontFamily: 'Impact',
                      borderRadius: 2,
                      lineHeight: 36,
                      align: 'left',
                      fontWeight: 'bold'
                    }
                  }
                }
              },
              data: this.seriesData
            }, {
              type: 'pie',
              startAngle: 60,
              radius: ['50%', '68%'],
              color: ['#9a75be', '#5ebfcd', '#f1b217'],
              labelLine: {
                normal: {
                  show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                }
              },
              label: {
                normal: {
                  formatter: this.showSum ? '{per|{d}%}\n{hr|}\n{b|{b}：{c}人}' : '{per|{d}%}\n{hr|}\n{b|{b}}',
                  rich: {
                    hr: {
                      width: '100%',
                      height: 0.5,
                      backgroundColor: '#fff',
                      shadowBlur: 2,
                      shadowOffsetX: 2
                    },
                    b: {
                      color: '#fff',
                      fontSize: 18,
                      lineHeight: 36
                    },
                    per: {
                      fontSize: 28,
                      fontFamily: 'Impact',
                      borderRadius: 2,
                      lineHeight: 36,
                      align: 'left',
                      fontWeight: 'bold'
                    }
                  }
                }
              },
              data: this.seriesOuterData
            }]
        }
      }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped>

</style>
